<template>
	<view class="wait-evaluate">
		<scroll-view :scroll-top="scrollTop" style="height:100vh; " scroll-y="true" show-scrollbar="true"
			@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="order-list">
				<view v-for="(order, index) in waitEvaluateOrders" :key="index" class="order-item">
					<view class="order-header">
						<image class="product-image" :src="order.image_url" mode="aspectFill"></image>
						<text class="product-name">{{ order.w_name }}</text>
						<text class="product-count">x{{ order.quantity }}</text>
					</view>
					<view class="order-info">
						<text class="order-status">待评价</text>
					</view>
					<view class="action-buttons">
						<u-button size="small" shape="circle"
							color="linear-gradient(to right, rgb(24, 207, 216), rgb(17, 213, 141))" text="评价"
							@click="evaluate(index,order.id)"></u-button>
					</view>
				</view>
			</view>
			<view v-if="waitEvaluateOrders.length === 0" class="no-order">
				<text>暂无待评价订单</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				waitEvaluateOrders: [

				],
				status: "待评价",
				currentPage: 1, // 当前页数
				totalPage: 1, // 总页数
				scrollTop: 0,
				backTopData: {
					mode: 'circle',
					icon: 'arrow-upward',
					bottom: 100,
					customStyle: {
						backgroundColor: '#cecece',
					},
					iconStyle: {
						color: "#ffffff",
					},
					right: 20,
					duration: 300
				},
			};
		},

		onLoad() {
			const {
				uid
			} = uni.getStorageSync('uid');

			// Assign uid to userId
			this.userId = uid;

			// 移除旧的监听器
			uni.$off('refreshOrderList');

			// 监听事件
			uni.$on('refreshOrderList', () => {
				// 调用 getStatus 方法刷新列表数据
				this.getStatus();
			});
			console.log(this.userId);
			this.getStatus();
		},
		created() {

		},
		methods: {
			upper() {},
			async lower() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
			
					await this.getStatus();
				}
			},
			scroll(e) {
				console.log(e);
				this.scrollTop = e.detail.scrollTop;
			},
			backToTop() {
				this.scrollTop = 0
			},
			evaluate(index, id) {
				console.log('评价', this.waitEvaluateOrders[index]);
				uni.navigateTo({
					url: `/pages/tabBar/my/wait/waitEvaluate/evaluate/evaluate?id=${id}`
				})
				// 处理评价逻辑
			},

			async getStatus() {
				this.waitEvaluateOrders = []
				const param = {
					status: this.status,
					userId: this.userId,
					current: this.currentPage,
					size: 10
				}
				const res = await this.$request.get('/system/logistics-order/getByStatus', param)
				console.log(res);
				if (res.code === 200) {
					this.waitEvaluateOrders = this.waitEvaluateOrders.concat(res.data.list.records)
					this.totalPage = res.data.list.pages;
				} else {

				}
			},
		},
	};
</script>

<style>
	.wait-evaluate {
		padding: 0px;
	}

	.order-list {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.order-item {
		border-bottom: 1px solid #eee;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-image {
		width: 60px;
		height: 60px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.order-header {
		display: flex;
		align-items: center;
	}

	.order-number {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-right: 10px;
	}

	.order-status {
		font-size: 14px;
		color: #ff6600;
	}

	.order-info {
		display: flex;
		align-items: center;
	}

	.product-name {
		font-size: 16px;
		color: #333;
		margin-right: 10px;
	}

	.product-count {
		font-size: 14px;
		color: #999;
	}

	.action-buttons {
		display: flex;
		align-items: center;
	}

	.evaluate-button,
	.contact-seller-button {
		background-color: #fff;
		color: #333;
		border: 1px solid #999;
		border-radius: 4px;
		padding: 8px 16px;
		font-size: 14px;
		margin-right: 10px;
		cursor: pointer;
	}

	.contact-seller-button {
		color: #ff6600;
		border-color: #ff6600;
	}

	.no-order {
		margin-top: 20px;
		text-align: center;
		color: #999;
	}
</style>